<template>
  <div class="home">
    <top class="wow fadeInDown" title="智慧运维视频监控智能分析系统"></top>
    <div class="homeMain">

      <!--中间地图区域-->
      <baidu-map ref="bmap" :scroll-wheel-zoom="true"
                 @ready="handleMapReady" :center="center" :zoom="zoom"
                 class="bm-view" @click="handleMapClick">
      </baidu-map>

      <div class="operation">
        <div class="operationItem active wow fadeInRight" data-wow-delay="0.1s">
          <i class="icon iconfont icon-shexiangtou"></i>
        </div>
        <div class="operationItem wow fadeInRight" @click="zoomIn" data-wow-delay="0.5s">
          <i class="icon iconfont icon-fangda1"></i>
        </div>
        <div class="operationItem wow fadeInRight" @click="zoomOut" data-wow-delay="0.9s">
          <i class="icon iconfont icon-suoxiao-copy"></i>
        </div>
        <div class="operationItem wow fadeInRight" @click="toggleFullScreen" data-wow-delay="1.2s">
          <i class="icon iconfont" :class="isFullScreen ? 'icon-tuichuzhuanhuan' : 'icon-full-screen'"></i>
        </div>
      </div>
      <div class="homeMainLeft">
        <div class="item1">
          <item title="设备定位">
            <item1 @getId="getId" :deviceList="list"></item1>
          </item>
        </div>
        <div class="item1">
          <item title="告警信息" :delay="0.5">
            <item2></item2>
          </item>
        </div>
      </div>
      <div class="homeMainRight">
        <div class="item1">
          <item title="故障列表">
            <item3></item3>
          </item>
        </div>
        <div class="item1">
          <item title="视图预览" :delay="0.5">
            <item4></item4>
          </item>
        </div>
      </div>
    </div>
    <videoBg></videoBg>
  </div>
</template>

<script>
import top from "../../components/top/index.vue";
import videoBg from "@/components/videoBg/index.vue";
import item from "@/components/item/index.vue";
import item1 from "./components/item1/index.vue";
import item2 from "./components/item2/index.vue";
import item3 from "./components/item3/index.vue";
import item4 from "./components/item4/index.vue";
import monitoring_green from '../../assets/home/monitoring_green.png'
import monitoring_red from '../../assets/home/monitoring_red.png'
import WOW from "wow.js";
import {deviceList} from "../../api/api/LargeScreenData.js";
import axios from "axios";

export default {
  data() {
    return {
      center: {lng: 116.404, lat: 39.915},
      zoom: 15,
      list: [],
      active: 0,
      isFullScreen: false,
    }
  },
  components: {
    top,
    videoBg,
    item,
    item3,
    item4,
    item2,
    item1
  },
  mounted() {
    var wow = new WOW({
      boxClass: "wow",
      animateClass: "animated",
    });
    wow.init();
    this.getData()
  },
  methods: {
    toggleFullScreen() {
      let elem = document.documentElement;
      if (!document.fullscreenElement) {
        elem.requestFullscreen().catch(err => {
          alert(`全屏显示失败: ${err.message} (${err.name})`);
        });
        this.isFullScreen = true;
      } else {
        document.exitFullscreen();
        this.isFullScreen = false;
      }
    },
    zoomIn() {
      const mapInstance = this.$refs.bmap.map;
      let currentZoom = mapInstance.getZoom();
      mapInstance.setZoom(currentZoom + 1);
    },

    zoomOut() {
      const mapInstance = this.$refs.bmap.map;
      let currentZoom = mapInstance.getZoom();
      if (currentZoom > 0) {
        mapInstance.setZoom(currentZoom - 1);
      }
    },
    getId(e) {
      this.active = e;

      // 获取对应ID的设备信息
      const targetDevice = this.list.find(device => device.id === e);
      if (targetDevice) {
        // 更新地图中心点
        const newCenter = {lng: targetDevice.value[0], lat: targetDevice.value[1]};
        this.center = newCenter;

        // 获取地图实例并设置中心点
        const mapInstance = this.$refs.bmap.map;
        const point = new BMap.Point(newCenter.lng, newCenter.lat);
        // mapInstance.panTo(point);  // 移动地图到新的中心点
        setTimeout(() => {
          mapInstance.panTo(point);
        }, 500); // 500毫秒，可以根据需要调整
      }
    },
    async getData() {
      try {
        const res = await deviceList();
        this.list = res.data;
      } catch (err) {
        console.error(err);
      }
    },
    handleMapReady({BMap, map}) {
      const mapInstance = this.$refs.bmap.map;
      // 修改地图主题色方法2
      mapInstance.setMapStyleV2({
        styleId: '9985b1b9b3c53e2a39308e8a6d3fdc0d'
      });
      // 地图初始化完成后的回调
      this.list.forEach(device => {
        const point = new BMap.Point(device.value[0], device.value[1]);

        // 根据状态选择图标
        const iconUrl = device.status === 1 ? monitoring_green : monitoring_red;

        const icon = new BMap.Icon(iconUrl, new BMap.Size(73, 83)); // 设置图片尺寸
        const marker = new BMap.Marker(point, {icon: icon});

        // 可选：添加信息窗口
        const infoWindow = new BMap.InfoWindow(`<p>${device.name}</p>`);
        marker.addEventListener('click', function () {
          this.openInfoWindow(infoWindow);
        });

        map.addOverlay(marker); // 将标注添加到地图中
      });
    },
    handleMapClick(e) {
      // 获取经纬度
      const {lng, lat} = e.point;
      console.log(`点击位置的经度是: ${lng}, 纬度是: ${lat}`);
    },
  },
}
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  position: fixed;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: nowrap;
  flex-direction: column;
}

.operation {
  position: absolute;
  right: 25%;
  top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: column;
  align-content: flex-start;

  .operationItem {
    height: 50px;
    width: 50px;
    display: flex;
    border: 1px solid #ffffff;
    margin-bottom: 20px;
    justify-content: center;
    align-items: center;
    background: #0b2941;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start;
    cursor: pointer;

    i {
      font-size: 26px;
    }
  }

  .operationItem.active {
    border: 1px solid #166994;

    i {
      color: #4ec7ff;
    }
  }
}

.homeMain {
  position: relative;
  width: calc(100% - 60px);
  height: calc(100% - 140px);
  margin-top: 140px;
  display: flex;
  margin-left: 30px;
  z-index: 1;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;

  .bm-view {
    width: calc(100% - 0px);
    position: absolute;
    left: 0px;
    top: 0;
    height: calc(100% - 30px);
  }

  .homeMainLeft {
    position: absolute;
    top: 20px;
    left: 10px;
    width: 23%;
    height: calc(100% - 60px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: column;
    align-content: flex-start;

    .item1 {
      position: relative;
      width: 100%;
      height: calc(40% - 10px);
    }

    .item1:nth-child(2) {
      position: relative;
      width: 100%;
      height: calc(60% - 10px);
    }
  }

  .homeMainRight {
    position: absolute;
    top: 20px;
    right: 10px;
    width: 23%;
    height: calc(100% - 60px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: column;
    align-content: flex-start;

    .item1 {
      position: relative;
      width: 100%;
      height: calc(50% - 10px);
    }

    .item1:nth-child(2) {
      position: relative;
      width: 100%;
      height: calc(50% - 10px);
    }
  }
}

</style>
